<template>
  <div>
    <header class="head">输入结构</header>
    <el-table row-key="nodeId" default-expand-all :data="paramIn" border max-height="250px">
      <el-table-column label="参数名" prop="nodeName" :show-overflow-tooltip="true" />
      <el-table-column label="参数描述" prop="nodeLabel" :show-overflow-tooltip="true" />
      <el-table-column label="参数类型" prop="nodeType" :show-overflow-tooltip="true">
        <template #default="scope">
          <span>{{ selectDictLabel(keyTypeList, scope.row.nodeType) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <header class="head">输出结构</header>
    <el-table row-key="nodeId" default-expand-all :data="nextNodeData.inParamList" border max-height="250px">
      <el-table-column label="参数名" prop="nodeName" :show-overflow-tooltip="true" />
      <el-table-column label="参数描述" prop="nodeLabel" :show-overflow-tooltip="true" />
      <el-table-column label="JsonPath">
        <template #default="scope">
          <el-input
            v-model="scope.row.jsonPath"
            size="mini"
            :disabled="isView"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import { mapState } from "vuex";

import { serviceStore } from '@slc/store/service';
import { flowServiceStore } from '@slc/store/flowService';
import { mapState, mapActions } from 'pinia';

export default {
  name: "custom-builder",
  computed: {
    ...mapState(flowServiceStore, ["moreNodeInfo", "currentNodeId", "serviceDomain"]),
    ...mapState(serviceStore, [
      "keyTypeList",
      "dialogStatus",
      "dialogVersionStatus",
    ]),
    formData: {
      get() {
          return this.moreNodeInfo[this.currentNodeId];
        // return this.$store.state.flowService.moreNodeInfo[this.currentNodeId];
      },
      set(val) {
          this.setMoreNodeInfo({
              ...this.moreNodeInfo,
              [this.currentNodeId]: val,
          });
        // this.$store.commit("flowerService/setMoreNodeInfo", {
        //   ...this.moreNodeInfo,
        //   [this.currentNodeId]: val,
        // });
      },
    },
    isView() {
      return (
        this.dialogStatus === "view" || this.dialogVersionStatus === "view"
      );
    },
    paramIn() {
      if (this.formData.preId) {
        if (this.formData.preId === 'serviceDomain') {
          return this.serviceDomain.paramIn || []
        } else {
          return this.moreNodeInfo[this.formData.preId] && this.moreNodeInfo[this.formData.preId].outParamList || []
        }
      } else {
        return []
      }
    },
    nextNodeData: {
      get() {
        return this.moreNodeInfo[this.formData.nextId] || {}
      },
      set(val) {

          this.setMoreNodeInfo({
              ...this.moreNodeInfo,
              [this.formData.nextId]: val,
          });

        // this.$store.commit("flowerService/setMoreNodeInfo", {
        //   ...this.moreNodeInfo,
        //   [this.formData.nextId]: val,
        // });
      }
    }
  },
  methods: {
  ...mapActions(flowServiceStore, ["setMoreNodeInfo"]),
  }
};
</script>

<style lang="scss" scoped>
.head {
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #333;
  font-weight: bold;
  font-size: 14px;
  background-color: #ccc;
}
</style>
